@import "../../assets/scss/mixins";
@import "../../assets/scss/variables";

.mine{
  margin: 0 auto;
  padding: 20px;
  min-height: 92vh;
  width: 100%;
  max-width: 1060px;
  // background-color: #FFCACA;
  overflow: hidden;

  .myInfo{
    @include flex-center(column);
    width: 100%;
    height: 250px;
    background-image: url("~@/assets/img/bg.jpg");
    background-size: 100% 100%;
    border-bottom: 1px solid #D7D7D7;
    box-shadow: 0 0 4px #A8A8A8;

    .myHeader{
      width: 100px;
      height: 100px;
      border-radius: 50%;
      border: 1px solid #929292;

      img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .myUserName{
      font-size: 20px;
      margin: 15px;
    }

    .mySignature{
      font-size: 15px;

      img{
        position: relative;
        top: 3px;
        width: 19px;
        height: 19px;
        margin-left: 16px;
        cursor: pointer;
      }
    }
  }

  .nav{
    @include flex-center(column);
    margin-top: 20px;
    width: 150px;
    height: 300px;
    background-color: #A4F5FF;
    float: left;
    box-shadow: 0 0 4px #A8A8A8;

    .item{
      display: 1;
      width: 100%;
      height: 100px;
      text-decoration: none;
      border-bottom: 1px solid #D0D0D0;
      color: #000;

      dl{
        width: 100%;
        height: 100%;
        @include flex-center(column);

        dt{
          margin-bottom: 10px;
        }
      }

      dl:hover{
        background-color: #FFBFBF;
      }
    }

    
  }

  .detail{
    margin-top: 20px;
    padding: 15px;
    width: 850px;
    min-height: 370px;
    background-color: #A7FFD5;
    float: right;
    box-shadow: 0 0 4px #A8A8A8;
  }

  .editInfo{
    text-align: center;
    padding-top: 40px;
    position: fixed;
    top: 15vh;
    right: 150px;
    width: 400px;
    height: 400px;
    box-shadow: 0 0 5px #656565;
    background-color: #fff;
  }
}